<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      >
<head th:replace="fragments/tabhead::headc"></head>
<!-- start body -->
<body>
<!-- start block -->
<th:block layout:fragment="content">
<div style="margin-top:15px">
	<!-- start form -->
	<form class="layui-form search" id="searchForm">
		<input type="hidden" id="tableId" name="tableId" th:value="${obj.id}"/>
		  <div class="layui-form-item layui-elem-quote">
		    <div class="layui-inline">
		      <label class="layui-form-label" style="width:100px">字段名</label>
		      <div class="layui-input-inline" style="width:200px">
		        <input type="text" name="name" class="layui-input" placeholder="请输入字段名"/>
		      </div>
		    </div>
		    <div class="layui-inline">
		      <div class="layui-input-inline" style="width:300px;">
		        <button class="layui-btn" id="searchBtn" type="button" >查询</button>
		        <button class="layui-btn" id="addBtn" type="button" >新增</button>
<!-- 		        <button class="layui-btn" id="delBtn" type="button" >删除</button> -->
		      </div>
		    </div>
		  </div>
	</form><!-- end form -->
</div>
<table class="layui-table"  id="tab" lay-filter="tab"></table>
<script>
var ins,editdialogindex,trobj;
$(function() {
	//start use
	layui.use('table', function(){
	  var table = layui.table;
	  //start render
	  ins=table.render({
		 elem:'#tab'
		 ,url:'/sys/table/auth/field/data'
		 ,where:{tableId:$("#tableId").val()}
		 ,cols:[[
// 			  {checkbox: true},
			  {field:'id',width:80, sort: true,title:'ID',fixed:true},
			  {field:'field', width:250,sort: true,title:'数据字段'},
			  {field:'field_name', width:180,sort: true,title:'字段名称'},
// 			  {field:'statusName', width:180,sort: true,title:'字段类型'},
			  {field:'field_name_display', width:180,sort: true,title:'显示名称'},
		      {field:'ctime', width:250,sort: true,title:'创建日期'},
// 		      {field:'remark', width:250,title:'备注'},
		      {align:'center',fixed:'right',width:200, toolbar:'#toolbar',title:'操作'}
		 ]]
	    ,page: true //是否显示分页
	    ,limits: [10,20,50]
	    ,limit:10 //每页默认显示的数量
		,done:function(res,curr,count){
// 			 console.log(res);
			 page = curr;
			    //得到当前页码
			    console.log(curr); 
			    //得到数据总量
			    console.log(count);
		}
	  });
	  //start table on
	  table.on("tool(tab)",function(obj) {
		  var data = obj.data;//当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值
		  trobj = obj;
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		  if(layEvent == 'edit'){
			  $.get('/sys/table/auth/field/edit?id='+data.id, {}, function(str){
					editdialogindex = layer.open({
										title:"修改表格信息",
									    type: 1,
									    area: ['400px', '300px'],
									    content: str, //注意，如果str是object，那么需要字符拼接。
									    zIndex:10
									  });
									});
		  }else if(layEvent == 'del') {
			  layer.confirm('确定删除该行数据', {icon: 3, title:'提示'}, function(index){
			    		 //向服务端发送删除指令
			    		$.get('/sys/table/auth/field/del_execute?id='+data.id,{},function(result) {
			    			if(result.code == 200) {
							    layer.close(index);
							    reloadData();
							    layer.msg(result.message,{icon: 6});
							    return false;
			    			}else{
			    			 layer.msg(result.message,{icon: 0});
			    			 layer.close(index);
			    			 return false;
			    			} 
			    		});
			      });
		  }
	  });
	  //end table on
	  //页面新增
	  $("#addBtn").click(function() {
		  var tableId = $("#tableId").val();
		  $.post('/sys/table/auth/field/addinit?tableId='+tableId,function(str) {
			  editdialogindex = layer.open({
					title:"新增单据",
					type:1,
					area:['400px', '300px'],
					content:str,
					zIndex:10
				});
		  });
	  });
	  
	  $("#delBtn").click(function() {
		  layer.msg("hello word!");
	  });
	  table.on('checkbox(tab)',function(obj) {
		  layer.msg(obj.data.id);
	  });
	  function reloadData(){
			$(".layui-laypage-btn")[0].click();//页面的确定按钮
		}
	  //页面查询按钮 start search
	  $("#searchBtn").click(function(){
		    ins.reload({url: '/sys/table/auth/field/data',where:$("#searchForm").serializeJson()})
		    return false;
		});
	  //end search
	  
	});
	//end render
//end use
});
</script>
<script type="text/html" id="toolbar">
	<a class="layui-btn layui-btn-mini" lay-event="edit" >修改</a>
	<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" >删除</a>
</script>
</th:block><!-- end block -->
</body><!-- end body -->